<template>
    <div class="stat">
        <ul>
            <li v-for="(item,index) in items" 
                :class="{active:curitem==index}" 
                @click="curitem=index"
                >{{item.label}}</li>
        </ul>
    </div>
</template>
<script>
    import {mapState,mapGetters,mapActions} from 'vuex'
    export default {
        name:'vStat',
        data (){
            return {
                curitem:0,
                items:[
                    {
                        label:'小号分析'
                    },
                    {
                        label:'任务分析'
                     },
                    {
                        label:'客户分析'
                    },
                    {
                        label:'朋友圈分析'
                    },
                    {
                        label:'话术分析'
                    }
                ]
            }
        },
        methods:{
            switch_view (currentView){
                this.$store.dispatch('switch_view',{currentView})
            }
        },
        computed:{
            ...mapState({
                currentView:state=>state.stat.currentView
            })
        }
    }
</script>
<style lang="scss" scoped>
$bg:blue !default;
   
 .stat {
     width: 100%;
     height: 100%;
 }

li {
     width: 100%;
     height: 0.3rem;
     line-height: 0.3rem;
     list-style: none;
     text-align: left;
     cursor: pointer;
     padding-left: 0.5rem;

    &.active {
        background: $bg;
        color: #fff;
    }
    &:hover{
        background:lighten($bg,40%)
    }
 }


</style>
